﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery后代选择器示例</title>
        <script src="js/jquery-3.6.1.min.js"></script>
        <style>
            div {
                width: 200px;
                border: 1px solid;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <h3>jQuery后代选择器示例</h3>
        <hr>
        <div class="style01">
            <h3>第一个标题</h3>
            <p>这是一段<span>测试文字</span>，用于测试后代选择器的效果。</p>
        </div>
        <div class="style02">
            <h3>第二个标题</h3>
            <p>这是一段<span>测试文字</span>，用于测试后代选择器的效果。</p>
        </div>
        <script>
            $(document).ready(function() {
                $("div.style01 span").css("border", "2px solid red");
            });
        </script>
    </body>
</html>

